{% extends 'web/base.html' %}
{% load staticfiles %}
{% block base_title %} 未付款 {% endblock %}
<!--{% block manifest %}appcache/unPaid.appcache{% endblock %}-->
{% block base_run %}unPaid{% endblock %}
{% block link_script%}
<style>
.mobel_box{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    top:0;
    left: 0;
    z-index: 40;
    display: none;
}
.mobel{
    width: 5rem;
    height: 2rem;
    position: fixed;
    top:50%;
    left: 50%;
    margin-left: -2.5rem;
    margin-top: -1rem;
    z-index: 50;
    background: white;
    text-align: center;
    line-height: 1rem;
    color: #555;
    font-size: .427rem;
    border-radius: .2rem;
}
.mobel_clo{
    border-top: 1px solid#555;
}
</style>
{% endblock%}

{% block base_body %}

<div class="order_con scroll all_bg" id="unPaid">
    <div v-if="loading"></div>
    <div v-else class="load_fix">
        <div class="zuan_center" style="background:none;">
            <div class="ui active centered inline loader red" style="top: 50%;transform: scale(.6)"></div>
        </div>
    </div>

    {% verbatim %}
    <div class="order_bian">
        <span style="float: left">订单编号：{{ ding.number }}</span>
        <span style="float: right">创建时间：{{ ding.time }}</span>
    </div>
    <div class="zuan_buy">
        <div class="zuan_buy_t">
            <div class="zuan_buy_tl">
                <div class="zuan_buy_tli"></div>
                <div class="zuan_buy_txt" v-if="ding.cate==1">股票钻石</div>
                <div class="zuan_buy_txt" v-else="ding.cate==2">期货钻石</div>
            </div>
            <div class="zuan_buy_tr">
                待付款
            </div>
        </div>
        <div class="zuan_buy_b">
            <div class="zuan_buy_img">
                <img :src="'http://www.zgtxcj.com/'+ding.image" height="100%">
            </div>
            <div class="zuan_buy_tx">
                <p class="zuan_buy_p1">{{ ding.name }}专享</p>
                <div class="zuan_buy_p2">
                    <p style="float: right">{{ ding.num }}个月</p>
                </div>
                <div class="zuan_buy_mon">
                    实付款：￥{{ ding.payprice }}
                </div>
            </div>
        </div>
    </div>
    <div class="ding_zeng" v-if="zeng.length>0">
        <div class="ding_zeng_t">赠送(必选) :</div>
        <div class="ding_zeng_b">
            <div v-for="zeng in zeng">
                <div :yid="zeng.product.p_id" class="ding_zeng_line">
                    <span class="ding_zeng_qu"></span>
                    {{ zeng.product.p_name }}
                </div>
            </div>
        </div>
    </div>
    {% endverbatim %}
    <div class="ding_shou">
        <div class="ding_shou_t">收款方</div>
        <div class="ding_shou_jie">公司名称：天下财经（北京）证券咨询有限公司</div>
        <div class="ding_shou_jie">招商银行：110-92867-1810-901</div>
        <div class="ding_shou_jie">公司邮箱：txcaijing@sina. com</div>
        <div class="ding_shou_di">
            <!--<div class="ding_shou_cheng">城市：石家庄</div>-->
            <div class="ding_shou_cheng" style="width:5rem"> 联系电话：400-6311-265</div>
        </div>
    </div>
    <div class="dingchu">
        <div class="ding_time_zhi">
            <div class="ding_time_kl">支付方式：</div>
            <div fid="6" class="ding_time_kzs ding_time_kzf">
                <div class="ding_time_kziw"></div>
            </div>
            <div fid="5" class="ding_time_kzs">
                <div class="ding_time_kzim"></div>
            </div>
        </div>
    </div>
    <div class="click_but">
        <form>
            {% csrf_token %}
            <input type="hidden" name="o_id" v-model="ding.d_id"/>   <!--产品ID-->
            <input type="hidden" class='o_zengid' name="o_zengid"/> <!--赠品ID-->
            <input type="hidden" class='o_useid' name="o_useid" v-model="uid"/> <!--用户ID-->
            <input type="hidden" class='o_time' name="o_time" v-model="ding.num"/> <!--购买时长-->
            <input type="hidden" class='o_price' name="o_price" v-model="ding.dprice"/> <!--产品单价-->
            <input type="hidden" class='o_name' name="o_name" v-model="ding.name"/> <!--产品名称-->
            <input type="button" value="付 款" class="click_txt click_l">
        </form>
    </div>
    <div class="mobel_box">
        <div class="mobel">
            <div>开发中，请重新下单！</div>
            <div class="mobel_clo">确定</div>
        </div>
    </div>
</div>
{% endblock %}

{% block base_script %}
    var unPaid = new Vue({
        el:'#unPaid',
        data:{
            dingID:localStorage.getItem('tabId'),
            uid:localStorage.getItem('uid'),
            ding:[],
            zuan:[],
            d_id:'',
            zeng:[],
            loading:false,
        },
        methods: {
            getZuan:function(){
                var self = this;
                reqwest({
                    url:'http://api.zgtxcj.com/txcjapi/indiamonds/?tag=diamonds',
                    method:'get',
                    type:'json',
                    success:function(resp){
                        self.zuan=resp;
                        self.getDing();
                    }
                })
            },
            getDing:function(){
                var self= this;
                reqwest({
                    url:'http://api.zgtxcj.com/mobile/speorder/',
                    method:'post',
                    type:'json',
                    data:{
                        uid:self.uid,
                        od_id:self.dingID
                    },
                    success:function (resp) {
                        for(var k in self.zuan){
                            if(self.zuan[k]['d_name']==resp['data']['name']){
                                resp['data']['cate']=self.zuan[k].d_cate;
                                resp['data']['d_id']=self.zuan[k].d_id;
                                self.d_id=self.zuan[k].d_id;
                                resp['data']['uid']=self.uid
                            }
                        }
                        if(resp['result']=='ok'){
                            resp['data']['time']=resp['data']['time'].replace(/T/,' ');
                            if(resp['data']['image'].indexOf('|')!=-1){
                                resp['data']['image']=resp['data']['image'].split('|')[0];
                            }
                            self.ding=resp['data'];
                        }else {
                            console.log('请检查参数')
                        }
                        // console.log(self.ding)
                        self.getZeng();
                        self.loading=true;
                    }
                })
            },
            getZeng:function(){
                var self = this;
                reqwest({
                    url: 'http://api.zgtxcj.com/txcjapi/indiamonds/?tag=diapro&id=' + self.d_id,
                    method: 'get',
                    type: 'json',
                    success:function(resp){
                        for (var t in resp){
                            resp[t]['product']['p_image']=resp[t]['product']['p_image'].split('|')[0];
                            if(resp[t]['dp_tag']==3){
                                self.zeng.push(resp[t])
                            }
                        }
                        self.cli()
                    }
                })
            },
            cli:function(){
                var self=this;
                this.$nextTick(function () {
                    $('.ding_zeng_line').click(function () {
                        $('.imgre').remove();
                        $(this).find('.ding_zeng_qu').append('<img class="imgre" src="{% static 'img/yes.png' %}"/>')
                    })
                    $('.ding_time_kzs').click(function () {
                        var index=$(this).index();
                        $('.ding_time_kzs').removeClass('ding_time_kzf').eq(index-1).addClass('ding_time_kzf')
                    });
                    var type=$('.ding_time_kzf').attr('fid');
                    $('.click_l').click(function () {
                        $('.mobel_box').show();
                    })
                    $('.mobel_clo').click(function () {
                        $('.mobel_box').hide();
                    })
                })
            },
            run:function () {
                this.getZuan()
            }
        },
    })
{% endblock %}
